<script lang="ts" setup>

import type {Goods} from "@/interfaces/goods";

interface Props {
  goodsList: Goods[]
}

const {goodsList} = defineProps<Props>()
const goGoodsDetail = (goods: Goods) => {
  uni.$u.route({
    url: '/pages/goods/goods',
    params: goods
  })
}
</script>

<template>
  <view class="goods-list">
    <view
        v-for="(goods,index) in goodsList"
        :key="index"
        class="goods"
    >
      <slot :goods="goods" name="prefix">

      </slot>
      <view class="goods-image" @tap="goGoodsDetail(goods)">
        <up-image :show-loading="true" :src="goods.images.split(';')[0]" height="120px" width="120px"></up-image>
      </view>
      <view class="goods-info" @tap="goGoodsDetail(goods)">
        <view class="goods-name">
          <up-text :text="goods.name" lines="2" size="30"></up-text>
        </view>
        <view class="goods-price">
          ￥{{ goods.price }}
        </view>
      </view>

    </view>
  </view>
</template>

<style lang="scss" scoped>
.goods-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background-color: #edf2fd;
  gap: 12px;

  .goods {
    display: flex;
    flex-direction: row;
    padding: 12px;
    background-color: #ffffff;
    border-radius: 12px;
    gap: 12px;

    .goods-image {
      flex: 2;

    }

    .goods-info {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-price {
        color: #dd524d;
        font-size: 24px;
      }
    }
  }
}
</style>